<template>
    <div style="width:400px">
    
        <el-form ref="ruleForm" :model="ruleForm"  label-width="100px"   class="demo-ruleForm">
        <el-form-item label="菜单级别">
    <el-select v-model=jb >
      <el-option v-for="(item,index) in menuS" :key="index" :label="item.name" :value="item.id"></el-option>
     
    </el-select>
  </el-form-item>
  <el-form-item label="菜单名称" prop="MenuName">
    <el-input v-model="ruleForm.MenuName"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="Url" v-if="kg">
    <el-input v-model="ruleForm.Url"></el-input>
  </el-form-item>
  <el-form-item label="菜单父级" prop="ParentID" v-if="kg">
  <el-select  placeholder="请选择菜单父级" v-model="ruleForm.ParentID">
      <el-option v-for="(item,index) in UpdateMenu" :key="index" :label="item.MenuName" :value="item.MenuID" ></el-option>
    </el-select>
</el-form-item>
<el-form-item label="图标地址" prop="Icon">
    <el-input v-model="ruleForm.Icon"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-menu">新增</el-button>
    <el-button @click="resetForm('ruleForm')" icon="el-icon-refresh-left">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
export default {
    name:'Add',
    data(){
        return {
            ruleForm:{
                MenuName:"",
                Url:"",
                ParentID:0,
                Icon:"el-icon-s-custom",
                LastTime:""

            },
            kg:false,
            jb:0,
            menu:[],
            menuS:[{id:0,name:"一级菜单"},
                {id:1,name:"二级菜单"}
            ],
            UpdateMenu:[],
          
        }
    },
    props:['dialogAdd'],
    created(){
  this.axios({
    method:"get",
    url:"Menus/Message"
  }).then(res=>{
    this.menu=res.data
   
  })
    },
     watch: {
        jb(newvalue,oldvalue){
         
            //修改数据的值
        if(newvalue==1){
          this.UpdateMenu=this.menu
          this.ruleForm.ParentID=this.UpdateMenu[0].MenuID;
         
          this.kg=true;
        }else{
            this.UpdateMenu=this.menu.filter(n=>n.ParentID==0)
            this.ruleForm.ParentID=this.UpdateMenu[0].MenuID;
            this.ruleForm.ParentID=0;
            this.kg=false;
        }   
        }
    }
    ,
    methods:{
        submitForm(formName) {
            //先验证表单数据
            this.$refs[formName].validate((valid) => {
                if (valid) {
                  console.log(this.ruleForm)
               this.axios({
                method:'post',
                url:'Menus',
                data:this.ruleForm
            }).then(res=>{
                if(res.code>0){
                  this.$emit('update:dialogAdd',false)
                  this.$emit("gx");
                    this.$message({ type:'success', message:res.msg})

                }else{
                    this.$message({ type:'danger', message:res.msg})
                }
            })
             
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
    
}
</script>

<style scoped>
</style>